<template>
  <div id="app">
    <router-view />
    <theme-picker />
    <!-- 全局图片预览起_页面高度有影响 -->
    <el-image
      v-show="srcList.length != 0"
      style="width: 0; height: 0"
      ref="$imagePrivewer"
      :src="url"
      :preview-src-list="srcList"
    >
    </el-image>
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";

const PreviewMixin = {
  data() {
    return {
      url: "",
      srcList: [],
    };
  },

  methods: {
    openVideoDialog(data) {
      this.$openDialog(videoDialog)(data, this)
        .then(() => {
          // 刷新页面
        })
        .catch(() => {
          console.log("用户返回了");
        });
    },
    showViewer() {
      this.$refs.$imagePrivewer.showViewer = true;
    },
  },

  created() {
    // 全局EventBus事件见ring
    /**
     * 预览图片
     */
    const PREVIEW_IMAGE_EVENT = "preview:image";
    this.$bus.$on(PREVIEW_IMAGE_EVENT, (e) => {
      this.url = e.url;
      this.srcList = e.srcList;
      this.showViewer();
    });
    /**
     * 预览视频
     */
    const PREVIEW_VIDEO_EVENT = "preview:video";
    this.$bus.$on(PREVIEW_VIDEO_EVENT, (e) => {
      let dataVideo = {
        url: e.url,
        width: e.width,
      };
      this.openVideoDialog(dataVideo);
    });

    this.$on("hook:destoryed", () => {
      this.$bus.$off(PREVIEW_IMAGE_EVENT);
      this.$bus.$off(PREVIEW_VIDEO_EVENT);
    });
  },
};
export default {
  name: "App",
  components: { ThemePicker },
  mixins: [PreviewMixin],
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title
          ? `${title} - ${process.env.VUE_APP_TITLE}`
          : process.env.VUE_APP_TITLE;
      },
    };
  },
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>

<style>
/* 全局el-table样式 */
.el-table th.el-table__cell.is-leaf {
  background-color: rgb(244, 243, 249) !important;
}

::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border-radius: 32px;
}

.right-menu-item .el-input__inner {
  border-radius: 14px;
}
</style>
